<template>
  <view class="test-container">
    <view class="test-title">BannerSwiper 闪烁问题测试</view>
    
    <!-- 测试按钮 -->
    <view class="test-controls">
      <button @click="toggleAutoplay" class="test-btn">
        {{ bannerAutoplay ? '停止自动播放' : '开始自动播放' }}
      </button>
      <button @click="addBanner" class="test-btn">添加Banner</button>
      <button @click="removeBanner" class="test-btn">删除Banner</button>
      <button @click="resetBanners" class="test-btn">重置Banner</button>
    </view>
    
    <!-- BannerSwiper组件 -->
    <BannerSwiper 
      :banners="testBanners"
      :autoplay="bannerAutoplay"
      ref="bannerSwiper"
      @change="onBannerChange"
      @loaded="onBannerLoaded"
      @error="onBannerError"
    />
    
    <!-- 状态显示 -->
    <view class="status-info">
      <text>当前索引: {{ currentIndex }}</text>
      <text>Banner数量: {{ testBanners.length }}</text>
      <text>自动播放: {{ bannerAutoplay ? '开启' : '关闭' }}</text>
    </view>
  </view>
</template>

<script>
import BannerSwiper from '@/components/BannerSwiper.vue';

export default {
  components: {
    BannerSwiper
  },
  
  data() {
    return {
      bannerAutoplay: true,
      currentIndex: 0,
      testBanners: [
        {
          bannerId: 1,
          imageUrl: 'https://picsum.photos/400/300?random=1',
          bannerType: 1,
          linkUrl: '',
          linkType: 0
        },
        {
          bannerId: 2,
          imageUrl: 'https://picsum.photos/400/300?random=2',
          bannerType: 1,
          linkUrl: '',
          linkType: 0
        },
        {
          bannerId: 3,
          imageUrl: 'https://picsum.photos/400/300?random=3',
          bannerType: 1,
          linkUrl: '',
          linkType: 0
        }
      ]
    }
  },
  
  methods: {
    toggleAutoplay() {
      this.bannerAutoplay = !this.bannerAutoplay;
      if (this.$refs.bannerSwiper) {
        this.$refs.bannerSwiper.toggleAutoplay();
      }
    },
    
    addBanner() {
      const newBanner = {
        bannerId: this.testBanners.length + 1,
        imageUrl: `https://picsum.photos/400/300?random=${this.testBanners.length + 1}`,
        bannerType: 1,
        linkUrl: '',
        linkType: 0
      };
      this.testBanners.push(newBanner);
    },
    
    removeBanner() {
      if (this.testBanners.length > 1) {
        this.testBanners.pop();
      }
    },
    
    resetBanners() {
      this.testBanners = [
        {
          bannerId: 1,
          imageUrl: 'https://picsum.photos/400/300?random=1',
          bannerType: 1,
          linkUrl: '',
          linkType: 0
        },
        {
          bannerId: 2,
          imageUrl: 'https://picsum.photos/400/300?random=2',
          bannerType: 1,
          linkUrl: '',
          linkType: 0
        }
      ];
    },
    
    onBannerChange(e) {
      this.currentIndex = e.current;
      console.log('Banner切换:', e.current);
    },
    
    onBannerLoaded() {
      console.log('Banner加载完成');
    },
    
    onBannerError(error) {
      console.error('Banner加载失败:', error);
    }
  }
}
</script>

<style lang="less" scoped>
.test-container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.test-title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
  color: #333;
}

.test-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.test-btn {
  flex: 1;
  min-width: 150rpx;
  padding: 20rpx;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 8rpx;
  font-size: 24rpx;
}

.status-info {
  margin-top: 30rpx;
  padding: 20rpx;
  background: white;
  border-radius: 8rpx;
  
  text {
    display: block;
    margin-bottom: 10rpx;
    font-size: 26rpx;
    color: #666;
  }
}
</style>
